<template>
  <div class="pager">
    <el-pagination
      layout="slot,prev,next"
      :total="totalInfo.total"
      prev-text="上一页"
      next-text="下一页"
      hide-on-single-page
      @current-change="handlerPageChange"
    >
      <slot>
        <span class="pager_text">
          共{{ totalInfo.total }}条记录 第 {{ totalInfo.pageIndex }}
          /
          {{ totalInfo.totalPage }}
          页
        </span>
      </slot>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Pager',
  props: {
    totalInfo: {
      type: Object,
      required: true
    }
  },
  methods: {
    handlerPageChange(val) {
      this.$emit('handlerPageChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.pager {
  background: #fff;
  padding: 32px 16px;
}
.el-pagination {
  display: flex;
  .pager_text {
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
    font-weight: 500;
  }
  ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
  ::v-deep .btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
  ::v-deep button:hover {
    color: #303133;
  }
  ::v-deep button:disabled {
    color: #d8dde3;
    background-color: #edf0f9;
  }
}
</style>
